<template>
  <div class="card flex-r-b">
      <div class="left">
                <label class="check-label " >
                    <input type="checkbox" 
                            v-model="data.checked" 
                            name='check-cl' 
                            :id='data.id' 
                            ref='checkbox'/>
                    <i class="icon-checked"></i>
                </label>
            </div>
            <div class="img">
                <img :src="data.url" alt="">
            </div>
            <div class="right flex-c-b">
                <p class="name ellipsis">{{data.name}}</p>
                <p class="size flex-r-b">
                    <span>{{data.size1}}</span>
                    <span>{{data.size2}}</span>
                    <span class="birthday">+添加生日牌</span>
                </p>
                <p class="flex-r-b">
                    <span class="price">{{data.price}}</span>
                </p>
                <div class='count-box flex-r-b'>
                    <span class="minus" @click='minus'></span>
                    <input type="number" readonly :value='data.count' />
                    <span class="plus" @click='plus'></span>
                </div>
            </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['data'],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
      minus(){
          if(this.data.count < 2){
              this.$emit('showConfirm',{id:this.data.id, type:1})
              return
          }
          let count = this.data.count
          count-- 
          this.$emit('updateCount',{id:this.data.id,count})
      },
      plus(){
        let count = this.data.count
          count++
          this.$emit('updateCount',{id:this.data.id,count})  
      }

  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.card {
  padding: 0.24rem;
  border-radius: $radius-10;
  background: $c-fb;
  position: relative;
  margin-bottom: 0.2rem;
  .left {
    height: 1.1rem;
    padding: 0.4rem 0.2rem 0.4rem 0;
    .check-label {
      display: block;
      input[type="checkbox"] {
        position: absolute;
        left: -9999rem;
      }
      .icon-checked {
        display: block;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 0.15rem;
        border: 1px solid $c-99;
      }
      input[type="checkbox"]:checked + i {
        border: none;
        background: url("../../public/images/icon/icon_17.png") no-repeat;
        background-size: 100%;
      }
    }
  }
  .img {
    height: 1.61rem;
    width: 1.61rem;
    border-radius: $radius-10;
    overflow: hidden;
  }
  .right {
    flex: 1;
    height: 1.62rem;
    padding-left: 0.24rem;
    .name {
      font-size: 0.26rem;
      color: $c-33;
    }
    .size {
      color: $c-99;
      font-size: 0.22rem;
      .birthday {
        color: $c-ffba17;
      }
    }
    .price {
      color: $c-33;
      font-size: 0.28rem;
    }
    .count-box {
      position: absolute;
      right: 0.2rem;
      bottom: 0.2rem;
      width: 1.6rem;
      height: 0.4rem;
      .minus,
      .plus {
        display: block;
        height: 0.4rem;
        width: 0.4rem;
        border-radius: 0.2rem;
        overflow: hidden;
      }
      .minus {
        background: url("../../public/images/icon/icon_18.png") no-repeat;
        background-size: 100%;
      }
      .plus {
        background: url("../../public/images/icon/iocn_3.png") no-repeat;
        background-size: 100%;
      }
      input {
        font-size: 0.28rem;
        color: $c-33;
        width: 0.7rem;
        height: 0.4rem;
        text-align: center;
      }
    }
  }
}
</style>